<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线编辑器</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://haloged-studio.eu.org/log.js"></script>
    <link rel="shortcut icon" href="https://static.codemao.cn/coco/player/unstable/HJfhP2bD2.image/png?hash=FoJ5JxvOlaVEUJM56LYITJ3KDwS9" type="image/x-icon">
    <script>
        $(document).ready(function () {
            $('.HTMLBtn').click(function () {
                $("#cssTextarea").fadeOut(function () {
                    $("#htmlTextarea").fadeIn();
                });
            })

            $('.CSSBtn').click(function () {
                $("#htmlTextarea").fadeOut(function () {
                    $("#cssTextarea").fadeIn();
                });
            })
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        .main {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 100%;
        }

        .textarea-box {
            display: flex;
            flex-direction: column;
            width: calc(50% - 20px);
            padding: 10px;
            background: rgba(34, 85, 85, 0.067);
        }

        .textarea-function-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .textarea-function-left,.textarea-function-right {
            display: flex;
            flex-direction: row;
        }

        .textarea-function-left div,
        .textarea-function-right div {
            padding: 5px 10px;
            border: 1px solid rgb(9, 54, 99);
            border-radius: 3px;
            cursor: pointer;
        }

        .textarea-function-left div:not(:first-child) {
            margin-left: 10px;
        }

        #htmlTextarea,
        #cssTextarea {
            height: calc(100% - 30px);
            width: calc(100% - 20px);
            margin-top: 10px;
            padding: 10px;
            overflow-y: scroll;
            background: #fff;
        }

        .html-div {
            background-color: cadetblue;
            margin-top: 10px;
            flex: 1;
        }

        .iframe-box {
            width: 50%;
            flex: 1;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="b-example-divider"></div>
    <header class="p-3 bg-light text-white">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
            <img src="https://static.codemao.cn/coco/player/unstable/SkML89Wv2.image/png?hash=FpQmPsglBgL6lCq061lWnJD_2gMF">
          </a>
  
          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><a href="\" class="nav-link px-2 text-black">主页</a></li>
            <li><a href="https://haloged-studio.eu.org/contest.html" class="nav-link px-2 text-black">赛事</a></li>
            <li><a href="https://haloged-studio.eu.org/product.html" class="nav-link px-2 text-black">产品</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                工具
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="https://haloged-studio.eu.org/tools/markdown/examples/simple.html" target="_blank">在线Markdown编辑器</a>
                <a class="dropdown-item" href="https://haloged-studio.eu.org/tools/dm/index.html" target="_blank">在线HTML编辑器</a>
                <a class="dropdown-item" href="https://haloged-studio.eu.org/tools/yy/index.php" target="_blank">一言API</a>
              </div>
            </li>
          <li><a href="#" class="nav-link px-2 text-black">关于</a></li>
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                更多
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="https://status.haloged-studio.eu.org/" target="_blank">站点监控</a>
                <a class="dropdown-item" href="https://vika.cn/share/shr2XZrygq1dXmsUcT2yo" target="_blank">反馈/建议</a>
                <a class="dropdown-item" href="https://vika.cn/share/shrt5xXPStzCPevDEQUjb" target="_blank">加入我们</a>
              </div>
            </li>
          </ul>
  
          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
            <input type="search" class="form-control form-control-dark" placeholder="搜索..." aria-label="Search">
          </form>
  
          <div class="text-end">
            <button type="button" class="btn btn-outline-black me-2">登录</button>
            <button type="button" class="btn btn-warning">注册</button>
          </div>
        </div>
      </div>
    </header>

    <div class="main">
        <div class="textarea-box">
            <div class="textarea-function-box">
                <div class="textarea-function-left">
                    <div class="HTMLBtn">HTML</div>
                    <div class="CSSBtn">CSS</div>
                </div>
                <div class="textarea-function-right">
                    <input type="text" id="input_name">
                    <div class="run">运行</div>
                    <div class="download">保存</div>
                </div>
            </div>
            <textarea id="htmlTextarea" placeholder="请输入html代码"></textarea>
            <textarea id="cssTextarea" placeholder="请输入css代码" style="display: none;"></textarea>
        </div>
        <div class="iframe-box">
            <iframe style="height: 100%;width: 100%;" src="" frameborder="0"></iframe>
        </div>
    </div>
</body>
<script>
    $('.run').click(function () {
    var htmlTextarea = document.querySelector('#htmlTextarea').value;
    var cssTextarea = document.querySelector('#cssTextarea').value;
    htmlTextarea += '<style>' + cssTextarea + '</style>'
    // 获取html和css代码
    let frameWin, frameDoc, frameBody;
    frameWin = document.querySelector('iframe').contentWindow;
    frameDoc = frameWin.document;
    frameBody = frameDoc.body;
    // 获取iframe元素

    $(frameBody).html(htmlTextarea);
    // 使用jqury的html方法把代码插入进去，这样能够直接执行
})
</script>
<!--定义login-->
<script>
    function loginciock(){
        window.location.replace("https://haloged-studio.github.io/login.html")
    }
    function re(){
        window.location.replace("https://shequ.codemao.cn/?type=register")
    }
</script>
</html>